<template>
    <div class="detail">
        <div class="breadcrumb">
            位置：首页<span>></span>模板专区<span>></span>{{ info.s_tname }}
        </div>
        <div class="swipe">
            <van-swipe :autoplay="3000" width="67vw" height="92vw">
                <van-swipe-item v-for="(image, index) in picList" :key="index">
                    <div class="swipe-img">
                        <img v-lazy="image" :alt="info.title" />
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="moban-title">
            <div class="name">
                <img :src="getType(info.type)" alt="" />
                {{ info.title }}
            </div>
            <div class="info">
                <div>
                    <van-icon name="down" color="#999999" />
                    {{ info.download }}
                </div>
                <div>免费下载</div>
            </div>
        </div>

        <div class="moban-info">
            <div class="moban-item">上传时间：{{ info.push_date }}</div>
            <div class="moban-item">文件来源：{{ info.resource }}</div>
            <div class="moban-item">文件格式：{{ info.type }}</div>
            <div class="moban-item">文件类型：{{ info.tname }}</div>
        </div>
        <div style="height: 4rem"></div>
        <div class="moban-bottom">
            <div class="collect" @click="setCollect">
                <van-icon
                    v-if="info.is_collect == 0"
                    name="star-o"
                    class="icon"
                    size="1rem"
                />
                <van-icon
                    v-else
                    name="star"
                    color="#FF9B21"
                    class="icon"
                    size="1.3rem"
                />
                {{ info.is_collect == "0" ? "收藏" : "已收藏" }}
            </div>
            <div class="but" @click="show = true">
                {{ info.is_downnload == 1 ? "查看模板" : "免费下载" }}
            </div>
        </div>

        <van-dialog
            v-model="show"
            title=""
            show-cancel-button
            confirm-button-text="下载APP"
            confirm-button-color="#0177FD"
            @confirm="downLoadAPP"
        >
            <div class="moban-dialog">
                <div class="text1">下载小竹财税APP</div>
                <div class="text2"><span>免费</span>获得模板</div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import {
    getListinfo,
    payModel,
    setCollect,
    get_relatedcommendlist,
    get_hotDocumentList,
} from "@/assets/api/modelAreaApi";
import { getanalysedata2 } from "@/assets/api/indexApi";

import { mapState, mapMutations } from "vuex";
import { goTopSmooth, downLoadAPP2 } from "@/assets/utils/utils.js";
import { Dialog, Toast } from "vant";

export default {
    components: {},
    async asyncData({ params }) {
        let data = {
            id: "",
            info: { money: 0 },
            meta: {
                title: "",
                keywords: "小竹财税模板专区,税模板专区,财税模板下载",
                description: "",
            },
            picList: [], //图片列表
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/templates/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
        };

        data.id = params.id.replace(".html", "");
        data.jsonld["@id"] += params.id;

        let res = await getListinfo({ id: data.id });
        data.info = res.data;
        if (res.code == 1) {
            data.jsonld.pubDate = data.jsonld.upDate = data.info.createtime;

            if (data.info.title) {
                data.meta.title = data.info.title;
                data.jsonld.title = data.info.title;
            }
            data.meta.description = data.info.abstract;
            data.jsonld.description = data.info.abstract;
            data.meta.keywords += `,${data.info.s_tname},${data.info.tname}`;

            data.picList = res.data.images.split("|");
        }

        return data;
    },
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld),
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.meta.title + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.meta.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.meta.keywords,
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            isVip: false,
            payShow: false,
            payMoney: null,
            token: "",
            downLoadAPP: downLoadAPP2,
            show: false,

            getType: function (type) {
                switch (type) {
                    case "EXCEL":
                        return require("~/assets/images/index/excel.png");
                    case "PDF":
                        return require("~/assets/images/index/pdf.png");
                    case "WORD":
                        return require("~/assets/images/index/word.png");
                    case "PPT":
                        return require("~/assets/images/index/ppt.png");
                    default:
                        return require("~/assets/images/index/zip.png");
                }
            },
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        ...mapState("modelArea", {
            modeInfo: (state) => state.modeInfo,
        }),
    },
    created() {},
    mounted() {
        console.log(this.info);
        this.getListinfo();
        getanalysedata2({
            m_id: 5,
            type: 1,
            code: "PG10",
            describe: this.info.title,
        });
        this.token = window.localStorage.getItem("token");
    },
    methods: {
        // 会员下载按钮
        vipPayButton() {
            if (!this.userInfo) {
                Dialog.confirm({
                    title: "提示",
                    message: "该功能需要登录后使用",
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {
                        // on cancel
                    });

                return;
            }

            window.open(this.info.content);
            this.downModel();
        },
        //调下载接口
        async downModel() {
            let res = await payModel({ id: this.id });
            if (res.code == 1) {
                console.log("下载成功");
                this.getListinfo();
            }
        },

        //获取详情数据
        async getListinfo() {
            let res = await getListinfo({ id: this.id });
            if (res.code == 1) {
                this.info = res.data;
            }
        },

        //收藏
        async setCollect() {
            let res = await setCollect({ cid: this.id });
            console.log("shoucang", res);
            if (res.code == 1) {
                Toast(res.data);
            }
            this.getListinfo();
        },
    },
};
</script>

<style lang="scss" scoped>
.detail {
    background-color: #f6f6f6;
    padding-bottom: 1.5rem;
}
.breadcrumb {
    height: 2.28rem;
    line-height: 2.28rem;
    padding-left: 1.43rem;
    font-size: 0.75rem;
    color: #666666;
    background: #ffffff;
    border-bottom: 1px solid #f6f6f6;
}
.swipe {
    padding: 1.875rem 0;
    .swipe-img {
        text-align: center;
        img {
            width: 67vw;
            height: 92vw;
            object-fit: cover;
        }
    }
}

.moban-title {
    width: 92%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    .name {
        img {
            height: 1.25rem;
            width: 1.25rem;
            position: relative;
            top: 0.3rem;
            padding-right: 0.2rem;
        }
        font-size: 34px;
        color: #333333;
        line-height: 1.5;
        font-size: 1rem;
        padding-bottom: 1rem;
    }
    .info {
        display: flex;
        justify-content: space-between;
        div {
            font-size: 0.81rem;
            color: #999999;
        }
    }
}

.moban-info {
    width: 92%;
    margin: 0.65rem auto 0;
    background: #ffffff;
    border-radius: 10px;
    padding: 0.5rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .moban-item {
        width: 50%;
        font-size: 0.81rem;
        color: #666666;
        margin: 0.4rem 0;
    }
}

.moban-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    width: 100%;
    .collect {
        text-align: center;
        width: 2.5rem;
        font-size: 0.6rem;
        color: #666666;
        .icon {
            padding-bottom: 0.3rem;
            display: block;
        }
    }
    .but {
        width: 17.625rem;
        height: 2.81rem;
        line-height: 2.81rem;
        border-radius: 2.81rem;
        background: #1c87f3;
        text-align: center;
        font-size: 0.93rem;
        color: #ffffff;
        margin-left: 0.9rem;
    }
}

.moban-dialog {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1rem;
    .text1 {
        font-size: 0.93rem;
        color: #222229;
        padding-bottom: 0.5rem;
    }
    .text2 {
        font-size: 1rem;
        font-weight: 600;
        color: #222229;
        span {
            color: #ff6161;
        }
    }
}
</style>
